<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{margin:0;padding:0;height:100%;}
        body{
            display:-webkit-flex;
            display:-ms-flexbox;
            display:flex;
            -webkit-align-items:center;
            -ms-flex-align:center;
            align-items:center;
            -webkit-justify-content:center;
            -ms-flex-pack:center;
            justify-content:center;
            background-color:#684da3;
        }
        p{color:#fff;font-size:1em;font-weight:bold;font-family:"寰蒋闆呴粦";}

        p span {
            display:inline-block;
            position:relative;
            -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
            -webkit-perspective:500;
            perspective:500;
            -webkit-font-smoothing:antialiased;
        }
        p span::before,
        p span::after {
            display:none;
            position:absolute;
            top:0;
            left:-1px;
            -webkit-transform-origin:left top;
            -ms-transform-origin:left top;
            transform-origin:left top;
            -webkit-transition:all ease-out 0.3s;
            transition:all ease-out 0.3s;
            content:attr(data-text);
        }
        p span::before {
            z-index:1;
            color:rgba(0,0,0,0.2);
            -webkit-transform:scale(1.1, 1) skew(0deg, 20deg);
            -ms-transform:scale(1.1, 1) skew(0deg, 20deg);
            transform:scale(1.1, 1) skew(0deg, 20deg);
        }
        p span::after {
            z-index:2;
            color:#684da3;
            text-shadow:-1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
            -webkit-transform:rotateY(-40deg);
            transform:rotateY(-40deg);
        }
        p span:hover::before {
            -webkit-transform:scale(1.1, 1) skew(0deg, 5deg);
            -ms-transform:scale(1.1, 1) skew(0deg, 5deg);
            transform:scale(1.1, 1) skew(0deg, 5deg);
        }
        p span:hover::after {
            -webkit-transform:rotateY(-10deg);
            transform:rotateY(-10deg);
        }
        p span + span {
            margin-left:0.1em;
        }
        @media (min-width:20em) {
            p {
                font-size:2em;
            }
            p span::before,
            p span::after {
                display:block;
            }
        }
        @media (min-width:30em) {
            p {
                font-size:3em;
            }
        }
        @media (min-width:40em) {
            p {
                font-size:5em;
            }
        }
        @media (min-width:60em) {
            p {
                font-size:8em;
            }
        }
    </style>
</head>
<body>
<p>
    <span data-text="3">3</span>
    <span data-text="D">D</span>
    <span data-text="折">折</span>
    <span data-text="叠">叠</span>
    <span data-text="字">字</span>
    <span data-text="体">体</span>
</p>


</body>
</html>